<template>
    <ScrollView class="home-box">
        <div>
            <!-- 轮播图start -->
            <SwiperView :options="loopOptions" :loops="loops">
                <img v-for="(item, index) in loops" :key="index" class="swiper-slide" :src="item.image_800" alt />
                <template #pagination>
                    <div class="swiper-pagination"></div>
                </template>
            </SwiperView>
            <!-- 轮播图end -->

            <!-- TypeList分类 start -->
            <TypeList :num="5" :list="mainTypes"></TypeList>
            <!-- TypeList分类 end  -->

            <!-- 分割图片start -->
            <div class="line">
                <span>超实惠直达</span>
            </div>
            <!-- 分割图片end -->

            <!-- 超实惠直达start -->
            <div class="sortgrid">
                <div v-for="(item, index) in superType" :key="index" class>
                    <div>
                        <p>{{ item.title }}</p>
                        <p>{{ item.viceTitle | removeBrace() }}</p>
                    </div>
                    <div>
                        <img :src="item.image" alt />
                    </div>
                </div>
            </div>
            <!-- 超实惠直达end -->

            <!-- 分割图片start -->
            <div class="line">
                <span>热门分类</span>
            </div>
            <!-- 分割图片end -->

            <!-- 热门分类start -->
            <TypeList :num="4" :list="hotTypes"></TypeList>
            <!-- 热门分类end -->

            <!-- 分割图片start -->
            <div class="line">
                <span>猜你喜欢</span>
            </div>
            <!-- 分割图片end -->

            <!-- 猜你喜欢start -->
            <YouLike class="product-home" :docs="youLike"></YouLike>
            <!-- 猜你喜欢end -->

            <!-- 底线 start -->
            <div class="endline">
                我是有底线的
            </div>
            <!-- 底线 end -->
        </div>
    </ScrollView>
</template>
<script>
import TypeList from "../components/TypeList.vue";
import YouLike from "../components/YouLike";
export default {
    data() {
        return {
            loopOptions:{
                autoplay:true,
                pagination: {
                    el: '.swiper-pagination',
                },
            },
            loops:[],
            mainTypes:[],
            hotTypes:[],
            superType:[],
            youLike:[]
        }
    },
    methods: {
        loadHomeData(){
            this.$api.loadDataFormMtiget({
                appPlat:"m" ,
                pids:"140378,106930,51833,51836"
            })
            .then((data)=>{
                // console.log(data);
                this.loops = data[140378].list;
                this.mainTypes = data[106930].list;
                this.superType = data[51833].list;
                this.hotTypes = data[51836].list;
            })
            .catch(this.$error);
        },
        loadHomelike(){
            this.$api.loadDataforsearch({
                pid:"9750",
                sort:"pop",
                cKey:46
            })
            .then(( { wall } )=>{
                // console.log(result);
                this.youLike = wall.docs;
            })
            .catch(this.$error);
        }
    },
    components:{
        TypeList,
        YouLike
    },
    mounted() {
        this.loadHomeData();
        this.loadHomelike();
    }
};
</script>   
<style lang="less" scoped>
@import "../../node_modules/swiper/css/swiper.min.css";
// home 页面
.home-box {
    position: absolute;
    width: 100%;
    top: @h;
    bottom: @h;
    overflow: hidden;
}
// 轮播图
.swiper-slide{
    height: 300px;
}

// 分割图片
.line {
    text-align: center;
    background-image: url("");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin: 10px;
    span {
        text-align: center;
    }
}
//  超实惠直达
.grid(@cl,@cr,@rl) {
    grid-column: @cl / span @cr;
    grid-row: @rl;
}
.sortgrid {
    width: 100%;
    height: 650px;
    display: grid;
    grid-template-columns: repeat(6, 100/6%);
    grid-template-rows: 200px 200px 250px;
    border-top: 1px solid @99;
    border-bottom: 1px solid @99;
    margin-top: 10px;
    > :nth-child(1):extend(.sortgrid-box-column all) {
        grid-column: 1 / span 3;
        grid-row: 1 / span 2;
        border-right: 1px solid @99;
    }
    > :nth-child(2):extend(.sortgrid-box-row all) {
        .grid(4, 3, 1);
        border-bottom: 1px solid @99;
    }
    > :nth-child(3):extend(.sortgrid-box-row all) {
        .grid(4, 3, 2);
    }
    > :nth-child(4):extend(.sortgrid-box-column all) {
        .grid(1, 2, 3);
        border-top: 1px solid @99;
    }
    > :nth-child(5):extend(.sortgrid-box-column all) {
        .grid(3, 2, 3);
        border-top: 1px solid @99;
        border-right: 1px solid @99;
        border-left: 1px solid @99;
    }
    > :nth-child(6):extend(.sortgrid-box-column all) {
        .grid(5, 2, 3);
        border-top: 1px solid @99;
    }
}
// 超实惠直达模板样式模板
// 竖向
.sortgrid-box-column {
    box-sizing: border-box;
    text-align: center;
    > :first-child{
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        > :first-child{
            font-size: 30px;
        }
        > :last-child{
            font-size: 28px;
            color: @light-pink;
        }
    }
    > :last-child{
        height: 60%;

        > img {
            width: 60%;
            height: 100%;
        }
    }
}
// 横向
.sortgrid-box-row {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    > :first-child{
        width: 60%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left:10px; 
        > :first-child{
            font-size: 30px;
        }
        > :last-child{
            font-size: 28px;
            color: @light-pink;
        }
    }
    > :last-child{
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        > img {
            width: 100%;
        }
    }
}
// 热门分类
.hotsort-home{
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    ::v-deep .hotsort-round{
        width: 25%;
    }
    ::v-deep .hotsort-square{
        width: 25%;
    }
}
// 猜你喜欢
.product-home{
    ::v-deep .show-box{
        height: 650px;
        .showbox-img{
            height: 80%;
        }
    }
    ::v-deep .showbox-det{
        height: 9%;
    }
}
.endline{
    text-align: center;
    color: @cc;
    padding:10px 0;
}
</style>
